<template>
  <div class="box">
    <div class="content_top">
      <div class="f1">
        <h5 class="f1_left">您好！欢迎来到湖北数字化国际贸易平台beta版</h5>
        <div class="f1_right">
          <ul>
            <li>
              <img
                style="width: 0.1198rem; height: 0.0938rem"
                src="@/assets/home/英文.png"
                alt=""
              />
            </li>
            <li>
              服务商中心<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
            <li @click="goUserCenter">
              用户中心<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
            <li>东风汽车 | 退出登录</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content_bottom">
      <div class="f2">
        <div class="logo">
          <img src="@/assets/home/logo.png" alt="" />
          <h2>湖北数字化国际贸易平台beta版</h2>
          <ul class="list">
            <li @click="goHome">首页</li>
            <li>
              通关服务<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
            <li>
              市场信息<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
            <li>
              物流仓储<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
            <li>
              金融服务<img
                style="margin-left: 0.026rem"
                src="@/assets/home/三角形1.png"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push("/");
    },
    goUserCenter() {
      this.$router.push("/user");
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.box {
  width: 10rem;
  height: 0.4688rem;
  .content_top {
    width: 10rem;
    height: 0.1563rem;
    background: #f5f7fa;
    .f1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 6.25rem;
      margin: 0 auto;
      height: 0.1563rem;
    }
    .f1_left {
      font-size: 0.0729rem;
      font-weight: 400;
      color: #666666;
    }
    .f1_right {
      box-sizing: border-box;
      padding: 0 0.026rem;
      display: flex;
      align-items: center;
      width: 2.2552rem;
      height: 100%;
      ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
          cursor: pointer;
          font-size: 0.0729rem;
          font-weight: 400;
          color: #181818;
          img {
            width: 0.0521rem;
            height: 0.0313rem;
          }
        }
      }
    }
  }
  .content_bottom {
    width: 10rem;
    height: 0.3125rem;
    background: #fff;
    .f2 {
      width: 6.25rem;
      margin: 0 auto;
      height: 0.3125rem;

      .logo {
        display: flex;
        align-items: center;
        height: 100%;
        img {
          width: 0.2083rem;
          height: 0.1979rem;
        }
        h2 {
          font-size: 0.125rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #181818;
          margin-left: 0.026rem;
        }
        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 2.7083rem;
          height: 100%;
          margin-left: 0.3125rem;
          li {
            cursor: pointer;
            font-size: 0.0833rem;
            font-weight: 400;
            color: #181818;
            img {
              width: 0.0521rem;
              height: 0.0313rem;
            }
          }
        }
      }
    }
  }
}
</style>
